<template>
  <form id="data-form-container" ref="form" @submit.prevent="handleSubmit" class="data-form-container">
    <!-- 事件修饰符prevent用于阻止事件默认行为 -->
    <div class="nickname">
      <input
        type="text"
        maxlength="10"
        v-model="formData.nickname"
        placeholder="用户昵称"
      />
      <!-- v-model: 双向绑定输入内容和nickname的值  -->
      <!-- 在文本框里按回车也会提交表单 -->
      <span>{{ formData.nickname.length }}/10</span>
    </div>
    <div class="err">{{ error.nickname }}</div>
    <div class="content">
      <textarea
        type=""
        maxlength="300"
        v-model="formData.content"
        placeholder="输入内容"
      ></textarea>
      <span>{{ formData.content.length }}/300</span>
    </div>
    <p class="err">{{ error.content }}</p>
    <button :disabled="isSubmiting">
      {{ isSubmiting ? "提交中..." : "提交" }}
    </button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        nickname: "",
        content: "",
      },
      error: {
        nickname: "",
        content: "",
      },
      isSubmiting: false,
    };
  },
  methods: {
    handleSubmit() {
      this.error.nickname = this.formData.nickname ? "" : "请填写昵称";
      this.error.content = this.formData.content ? "" : "请填写内容";
      if (this.error.nickname || this.error.content) {
        // 有错误
        return;
      }
      this.isSubmiting = true; // 正在提交, 防止重复点击
      this.$emit("submit", this.formData, (successMsg) => {
        // 表单提交完成后需要做的事情 [用回调的方式让父组件能够修改子组件的数据]
        this.$showMessage({
          content: successMsg,
          type: "success",
          duration: 1000,
          container: this.$refs.form,
          callback: () => {
            this.isSubmiting = false;
            this.formData.nickname = "";
            this.formData.content = "";
          },
        });
      }); // 抛出事件, 让父组件处理
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@/styles/var.less";
.data-form-container {
  margin-bottom: 20px;
  overflow: hidden;
  input,
  textarea,
  button {
    outline: none;
    border: none;
  }
  .nickname,
  .content {
    border: 1px dashed #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    position: relative;
    span {
      position: absolute;
      right: 5px;
      bottom: 5px;
      font-size: 12px;
      line-height: initial;
      color: @gray;
    }
    input,
    textarea {
      width: 100%;
      font-size: 14px;
      color: @words;
    }
  }
  .nickname {
    width: 50%;
    height: 40px;
    line-height: 40px;
    padding: 0 15px 0 15px;
    display: flex;
  }
  .content {
    width: 100%;
    height: 120px;
    padding: 8px 15px;
    textarea {
      height: 100%;
      resize: none; // 不可改变大小
    }
  }
  .err {
    height: 20px;
    line-height: 20px;
    color: @danger;
    font-size: 14px;
    margin: 6px 0;
  }
  button {
    width: 100px;
    height: 34px;
    background: @primary;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    &:hover {
      background: darken(@primary, 10%);
    }
    &:disabled {
      background: lighten(@primary, 20%);
      cursor: not-allowed;
    }
  }
}
</style>
